<template lang="pug">
div
  nav-div
  h1.ui.header {{optometrist.name}}
    //- .sub.header 创建于 2016-08-23
  .ui.divider
  .ui.grid
    .six.wide.column.border-right
      .ui.vertical.fluid.secondary.menu
        .ui.dropdown.item(v-bind:class="{ active: group === 0 }", @click="group = 0")
          i.dropdown.icon
          | 基本信息
        .ui.dropdown.item(v-bind:class="{ active: group === 1 }", @click="group = 1")
          i.dropdown.icon
          | 全部订单
        .ui.dropdown.item(v-bind:class="{ active: group === 2 }", @click="group = 2")
          i.dropdown.icon
          | 售后订单
        .ui.dropdown.item(v-bind:class="{ active: group === 3 }", @click="group = 3")
          i.dropdown.icon
          | 评价
      .ui.equal.width.grid
        .column.center.aligned 最近1月
        .column.center.aligned.border-right
          .ui.mini.statistic
            .value
              | 4.9
            .label
              | 打分
        .column.center.aligned.border-right
          .ui.mini.statistic
            .value
              | 60
            .label
              | 评价
        .column.center.aligned
          .ui.mini.statistic
            .value
              | 128
            .label
              | 人次
      .ui.divider.section
      .ui.header 出勤日期
      a.right.floated 编辑
      .ui.divider
      .ui.header 备注信息
    .ten.wide.column
      .ui.basic.clearing.segment.center.aligned
        template(v-if="group === 0")
          .ui.basic.clearing.segment
            h2.ui.header.left.floated 基本信息
            .flex.je.ae
              .ui.button(v-if="['view'].includes(mode)", @click="mode = 'edit'") 编辑
              .ui.button(v-if="['edit'].includes(mode)", @click="save") 保存
              .ui.button.negative(v-if="['edit'].includes(mode)", @click="cancel") 取消
          .ui.equal.width.grid
            .column.middle.aligned
              img.ui.small.image(v-if="['view'].includes(mode)", v-bind:src="optometrist.avatar")
              img-upload(v-else, v-bind:src.sync="optometrist.avatar")
            .column.middle.aligned
              table.ui.very.basic.single.line.table
                tbody
                  tr
                    td id:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.id",
                          readonly,
                        )
                  tr
                    td 姓名:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.name",
                          :readonly="['view'].includes(mode)",
                        )
                  tr
                    td 手机号:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.phone",
                          :readonly="['view'].includes(mode)",
                        )
                  tr
                    td 紧急手机号:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.emergency_phone",
                          :readonly="['view'].includes(mode)",
                        )
                  tr
                    td 性别:
                    td
                      obj-single-select(
                        :options="helper.genderArray",
                        key="value",
                        label="text",
                        :value.sync="optometrist.gender",
                        type="value",
                      )
                  tr
                    td 头衔:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.title",
                          :readonly="['view'].includes(mode)",
                        )
                  tr
                    td 备注:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.comment",
                          :readonly="['view'].includes(mode)",
                        )
                  tr
                    td 地址:
                    td
                      .ui.input
                        input(
                          type='text',
                          v-model="optometrist.address",
                          :readonly="['view'].includes(mode)",
                        )
          .ui.basic.clearing.segment.center.aligned
            .ui.form
              .field
                textarea
        template(v-if="group === 1")
          .ui.basic.clearing.segment
            p 1
        template(v-if="group === 2")
          .ui.basic.clearing.segment
            p 1
        template(v-if="group === 3")
          .ui.basic.clearing.segment
            p 1
</template>

<script>
import NavDiv from '../../modules/nav'
import { getOptometrist, updateOptometrist } from '../../vuex/action'
import imgUpload from '../../modules/upload/img'
import ObjSingleSelect from '../../modules/select/objSingle'

export default {
  name: 'optometrist',
  components: {
    NavDiv,
    imgUpload,
    ObjSingleSelect,
  },
  vuex: {
    getters: {
      optometristSource: ({ optometrist }) => optometrist.optometrist,
    },
    actions: {
      getOptometrist,
      updateOptometrist,
    }
  },
  data () {
    return {
      optometrist: null,
      mode: 'view',
      group: 0,
    }
  },
  methods: {
    save () {
      catchError(async () => {
        let data = _.cloneDeep(this.optometrist)
        await this.updateOptometrist(data)
        await this.getOptometrist(data.id)
        this.mode = 'view'
      }, '更新成功')
    },
    cancel () {
      this.mode = 'view'
      this.optometrist = _.cloneDeep(this.optometristSource)
    },
  },
  route: {
    data({ to: { params: { id }, query: { mode } } }) {
      catchError(async () => {
        await this.getOptometrist(id)
        if (mode) {
          this.mode = mode
        }
      })
    }
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  watch: {
    optometristSource: {
      handler (val, old) {
        this.helper.title(`验光师 ${val.name}`)
        this.optometrist = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
